<!--字典管理-->
<template>
  <div>
    <!--搜索条件-->
    <el-form inline :model="searchParam" ref="searchParam" label-width="80px" class="search-form">
      <el-form-item label="字典编码" prop="dictCodeVague">
        <el-input v-model="searchParam.dictCodeVague" placeholder="字典编码" clearable></el-input>
      </el-form-item>
      <el-form-item label="字典名称" prop="dictNameVague">
        <el-input v-model="searchParam.dictNameVague" placeholder="字典名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <es-select v-model="searchParam.status" enum-name="StatusEnum"></es-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="searchForm">查询</el-button>
        <el-button icon="el-icon-refresh" @click="resetSearchForm">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-button type="primary" icon="el-icon-plus" @click="add">新增</el-button>
      <el-button type="primary" icon="el-icon-edit" @click="edit">修改</el-button>
      <el-button type="success" icon="el-icon-unlock" @click="">启用</el-button>
      <el-button type="warning" icon="el-icon-lock" @click="">禁用</el-button>
      <el-button type="danger" icon="el-icon-delete" @click="">删除</el-button>
    </el-row>
    <!--表格-->
    <el-table
      border
      :data="tableData"
      v-loading="loading"
      element-loading-text="数据加载中"
      @selection-change="handleSelectionChange"
      class="mt-20">

      <el-table-column
        type="selection"
        width="55">
      </el-table-column>

      <el-table-column
        prop="dictCode"
        label="字典编码"
        show-overflow-tooltip
      >
      </el-table-column>

      <el-table-column
        prop="dictValue"
        label="字典值"
        show-overflow-tooltip
      >
      </el-table-column>

      <el-table-column
        prop="dictName"
        label="字典名称"
        show-overflow-tooltip
      >
      </el-table-column>

      <el-table-column
        prop="sortNo"
        label="排序"
        show-overflow-tooltip
      >
      </el-table-column>

      <el-table-column
        prop="isSys"
        label="是否系统内置"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <!--自定义组件 字典转义-->
          <es-value-format :data="whetherData" :value="scope.row.isSys"
                          render-color></es-value-format>
        </template>
      </el-table-column>

      <el-table-column
        prop="status"
        label="状态"
      >
        <template slot-scope="scope">
          <!--自定义组件 字典转义-->
          <es-value-format :data="statusData" :value="scope.row.status"
                          render-color></es-value-format>
        </template>
      </el-table-column>

      <el-table-column
        fixed="right"
        label="操作"
        show-overflow-tooltip
        width="220">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="">查看
          </el-button>
          <el-button
            size="mini" type="primary"
            @click="edit(scope.$index,scope.row)">编辑
          </el-button>
          <el-button
            v-if="scope.row.isSys == 0"
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      style="margin: 20px;float: right;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-size="searchParam.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!--新增修改-->
    <el-dialog :title="title" :visible="action==='add' || action==='edit'" :before-close="handleClose">
      <el-form :model="item" :rules="rules" ref="ruleForm" label-width="100px">
        <div class="form-item-group">
          <el-form-item label="字典编码" prop="dictCode">
            <el-input v-model="item.dictCode"
                      placeholder="请输入字典编码"
                      maxlength="50"
                      show-word-limit
            ></el-input>
          </el-form-item>

          <el-form-item label="字典值" prop="dictValue">
            <el-input v-model="item.dictValue"
                      placeholder="请输入字典值"
                      maxlength="50"
                      show-word-limit
            ></el-input>
          </el-form-item>

          <el-form-item label="字典名称" prop="dictName">
            <el-input v-model="item.dictName"
                      placeholder="请输入字典名称"
                      maxlength="50"
                      show-word-limit
            ></el-input>
          </el-form-item>

          <el-form-item label="排序" prop="sortNo">
            <el-input v-model="item.sortNo"
                      placeholder="请输入排序"
                      maxlength="8"
                      show-word-limit
            ></el-input>
          </el-form-item>

          <el-form-item label="状态" prop="status">
            <es-select v-model="item.status" enum-name="StatusEnum"></es-select>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="action = 'list'">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {getList,save,update,deleteDict} from '../../api/sys/dictApi';
  import {getEnum} from '../../api/getComData';
  import validate from '../../libs/validate'
  import util from '@/libs/util'

  export default {
    name: 'dictList',
    data () {
      return {
        searchParam: {//表格数据请求参数
          page: 1,
          limit: 10
        },
        title: '',
        action: 'list',
        loading: false,
        item: {},  //修改/详情数据
        rules: {  //表单验证
          dictCode: [
            {required: true, message: '请输入字典编码', trigger: 'blur'}
          ],
          dictValue: [
            {required: true, message: '请输入字典值', trigger: 'blur'}
          ],
          dictName: [
            {required: true, message: '请输入字典名称', trigger: 'blur'}
          ],
          sortNo: [
            {required: true, message: '请输入排序', trigger: 'blur'},
            {validator: validate.integer, trigger: 'blur'}
          ],
          status: [
            {required: true, message: '请选择状态', trigger: 'change'}
          ]
        },
        multipleSelection: [], //复选框选中的值
        tableData: [],
        total: 0,
        ids:[],
        currentIndex:0,
        whetherData:[],
        statusData:[],
      }
    },
    mounted () {
      let _this = this;
      getEnum({"enumName":"WhetherEnum"}).then((res)=>{
        _this.whetherData = res.data;
      });
      getEnum({"enumName":"StatusEnum"}).then((res)=>{
        _this.statusData = res.data;
      });
      //获取数据
      this.getTableData()
    },
    methods: {
      //获取数据
      getTableData () {
        let _this = this
        _this.loading = true
        getList(_this.searchParam).then((res) => {
          if (res.code === 200) {
            _this.tableData = res.data
            _this.total = res.total
          } else {
            this.$message.error(res.msg)
          }
          _this.loading = false
        })
      },
      //提交表单
      submitForm () {
        let _this = this
        _this.$refs['ruleForm'].validate(function (valid) {
          if (valid) {
            //保存
            if (_this.action === 'add') {
              save(_this.item).then((res) => {
                if (res.code === 200) {
                  _this.$message.success('新增成功！')
                  _this.getTableData()
                } else {
                  _this.$message.error(res.msg)
                }
                _this.action = 'list'
              })
            }
            //修改
            else if (_this.action === 'edit') {
              update(_this.item).then((res) => {
                if (res.code === 200) {
                  _this.$message.success('修改成功！')
                  _this.getTableData()
                } else {
                  _this.$message.error(res.msg)
                }
                _this.action = 'list'
              })
            }
          }
        })
      },
      //删除
      handleDelete: function (index, row) {
        let temp = Object.assign({}, row);
        //获取选中的id
        let ids = this.getSelectIds(temp);
        if (ids.length > 0) {
          this.ids = ids;
          //删除数据
          let _this = this;
          _this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            callback: function (action, instance) {
              if (action === "confirm") {
                deleteDict(_this.ids).then((res)=>{
                  if (res.code === 200) {
                    //刷新表格数据
                    _this.getTableData();
                    _this.$message.success("删除成功!");
                  } else {
                    _this.$message.error(res.msg);
                  }
                });
              }
            }
          })
        }
      },
      add () {
        this.item = {}
        this.action = 'add'
        this.title = '新增字典'
      },
      //修改页面
      edit: function (index, row) {
        let _this = this
        let temp = Object.assign({}, row)
        if (Object.keys(temp).length === 0) {
          let chcekeds = _this.multipleSelection
          if (chcekeds.length === 0) {
            _this.$message.error('请选择一条数据')
            return false
          } else if (chcekeds.length > 1) {
            _this.$message.error('只能选择一条数据')
            return false
          } else {
            _this.item = chcekeds[0]
          }
        } else {
          _this.item = temp
        }
        _this.action = 'edit'
        _this.title = '修改字典'
        _this.currentIndex=index;
      },
      handleClose (done) {
        this.action = 'list'
        done()
      },
      //获取选中行
      getSelectIds: function (row) {
        let chcekeds = [];
        let ids = [];
        if (!row || Object.keys(row).length === 0) {
          chcekeds = this.multipleSelection;
          if (chcekeds.length === 0) {
            this.$message.error("至少选择一条数据");
          } else {
            for (let key in chcekeds) {
              ids.push(chcekeds[key].id);
            }
          }
        } else {
          ids.push(row.id);
        }
        return ids;

      },
      //查询表格
      searchForm () {
        this.searchParam.page = 1
        //获取数据
        this.getTableData()
      },
      //重置查询表格
      resetSearchForm () {
        this.$refs['searchParam'].resetFields()
        //获取数据
        this.getTableData()
      },
      handleSizeChange (limit) {
        this.searchParam.limit = limit
        //获取数据
        this.getTableData()
      },
      handleCurrentChange (page) {
        this.searchParam.page = page
        //获取数据
        this.getTableData()
      },
      //复选框选择
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
    }
  }
</script>

<style scoped>

</style>
